"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";

const qa1answers: string[] = [
  "（1）登录天域转运官网（www.yunczy.com），注册账户后即可在个人中心查看您的美国境内专属收货地址；",
  "（2）在网站下单时，地址填写天域转运仓库地址（免税商业仓，无美国国内消费税）；",
  "（3）商家发货后，登录天域转运账户进行包裹预报，以便仓库及时准确的录入包裹；",
  "（4）包裹到库后，提交发货，并确保余额充足；",
  "（5）仓库分拣打包完成后，系统将自动扣款；并操作转仓及出库。",
];

const Question = ({ text }: { text: string }) => {
  return (
    <div className="flex items-center h-[115px] rounded-t-[20px] bg-[#32A1FD] bg-opacity-20">
      <Image
        src={"/assets/help/tip.png"}
        className="ml-9"
        alt=""
        width={40}
        height={40}
      ></Image>
      <p className="font-bold text-[32px] leading-9 ml-[18px] text-[如何海淘]">
        {text}
      </p>
    </div>
  );
};

const Answers = ({ children }: { children: React.ReactNode }) => {
  return (
    <ul className="py-10 px-5 bg-[#32A1FD]  rounded-b-[20px] bg-opacity-5 flex flex-col gap-y-[30px]">
      {children}
    </ul>
  );
};

const AnswerItem = ({ children }: { children: React.ReactNode }) => {
  return (
    <li className="answer-item rounded-[20px] pl-12 pr-8 bg-[#32A1FD]  bg-opacity-5 min-h-[120px] leading-7 text-[22px] py-[45px] font-medium text-[#333]">
      {children}
    </li>
  );
};

const Qa1 = () => {
  return (
    <>
      <Question text="如何海淘" />

      <Answers>
        {qa1answers.map((_, index) => (
          <AnswerItem key={`answer-${index}`}>{_}</AnswerItem>
        ))}
      </Answers>
    </>
  );
};

const Qa2 = () => {
  return (
    <>
      <Question text="海淘常见问题" />
      <Answers>
        <AnswerItem>
          <p>
            （1）账单地址（Billing address）问题：首选信用卡地址，若是不成功，可选择与收件地址相同(Same to shipping address)。
          </p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              注：一般支持国卡转运的网站，信用卡地址要求不严，默认转运地址就可以。对地址/卡有要求的网站，建议填写信用卡真实地址。
            </p>
          </div>

        </AnswerItem>

        <AnswerItem>
          <p>
            （2）寄送地址（Shipping address）问题：Shipping
            address必须准确填写，写错地址可能会收不到包裹。若是不小心写错地址，务必要及时联系商家更正。
          </p>
        </AnswerItem>

        <AnswerItem>
          <p>
            （3）用户编号/收件码：仓库操作包裹入库的识别码，下单请务必准确填写。商家有时地址打印不全，所以天域转运在用户姓Last
            name和地址2，Address2，重复出现收件码。至少一处正确清晰展现，通常即可正常入库。
          </p>
        </AnswerItem>

        <AnswerItem>
          <p>（4）是否有美国私人收件地址？</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              美私地址，即美国私人住宅地址。美国部分商家存在砍单情况，可以尝试美私地址下单。天域转运免费向年费及以上等级会员提供免税州美私地址。（为了延长地址的使用期，每月使用数量会有限额，且不向全部会员开放。）
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（5）账户余额是否可以提现？</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">可以的。以下是提现相关：</p>
            <p className="text-[18px] my-1">
              会员有效期内不支持提现；参与营销活动全额不可提现；
            </p>
            <p className="text-[18px] my-1">
              提现退款手续费为5%，最低收取20元，不足20收20。提现金额将于5个工作日内(节假日除外)到账。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（6）禁运物品列表是否可以提供一下？</p>

          <div className="pl-5">
            <p className="text-[18px] my-1">
              可以的，以下内容您做参考，具体可以详询客服。
            </p>
            <p className="text-[18px] my-1">
              按照中华人民共和国海关总署进口准则，一切管制刀具，书刊，涉及色情，反动等材料的影音物品，以及毒品，枪支弹药等一概不承运；
            </p>

            <ul className="text-[16px]">
              <li className="my-1">
                A.食物类（宠物食品、含肉泥的宝宝辅食、各种养生大补品：人参，花胶燕窝，冬虫夏草，魚翅，干海鲜类，液体奶等）旧物等
              </li>
              <li className="my-1">
                B.涉及文化传播的书籍、杂志、音像光盘（CD、唱片等）、报纸等及苹果系列产品、有价债券等
              </li>
              <li className="my-1">
                C. 动植物衍生品（植物种子、动物皮毛制品等）
              </li>
              <li className="my-1">
                D. 汽车配件、电子配件（如手机配件、笔记本配件、笔记本等）
              </li>
              <li className="my-1">E. 贵重金银首饰、宝石；钻石等</li>
              <li className="my-1">
                F. 其他（二手商品、珍贵文物、国家货币等）
              </li>
            </ul>
          </div>
        </AnswerItem>
      </Answers>
    </>
  );
};

const Qa3 = () => {
  return (
    <>
      <Question text="价格与服务等常见问题" />
      <Answers>
        <AnswerItem>
          <p>（1）可以转运哪些产品呢？</p>

          <div className="pl-5">
            <p className="text-[18px] my-1">
              除网站列出的违禁物品/奢侈品/工业产品/超贵重产品/超大体积产品/二手旧物等都可以转运。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（2）如何计费呢？</p>

          <div className="pl-5">
            <p className="text-[18px] my-1">
              天域转运目前有5种渠道，不同渠道可承运物品、打包规则及计费不同，可结合具体产品选择适当渠道发货。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（3）会员体系如何呢？</p>

          <div className="pl-5">
            <p className="text-[18px] my-1">
              天域转运目前会员有4个等级，都要求一次性充值。
            </p>
            <p className="text-[18px] my-1">支持支付宝和微信充值。</p>

            <ul className="text-[16px]">
              <li className="my-1">
                ①充值￥100,000元，升级天域转运尊享会员，会员价运费9折，享专属货架，提供≥2个专属美私，不限量收取包裹。
              </li>
              <li className="my-1">
                ②充值￥10,000元，升级天域转运超级年费会员，会员价运费9折，2个美私地址。（2个免税州美私，每个地址每月各6个包裹）
              </li>
              <li className="my-1">
                ③充值￥5,000元，升级天域转运年费会员，会员价运费95折，1个美私地址。（免税州美私，每月3个包裹）
              </li>
              <li className="my-1">
                ④充值￥1,000元，升级天域转运双月会员，会员价运费98折。
              </li>
            </ul>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>(4)商家发错货需要退货或者需要将包裹寄到美国其他地址，是否可以？</p>

          <div className="pl-5">
            <p className="text-[18px] my-1">
              可以。天域转运仅收取退货/发货手续费，需要客户准备退运/发货label(美国境内运费客户自理）。
            </p>
          </div>
        </AnswerItem>
      </Answers>
    </>
  );
};

const Qa4 = () => {
  return (
    <>
      <Question text="转运过程中常见问题" />
      <Answers>
        <AnswerItem>
          <p>（1）显示递送(delivered),但是未到库怎么办？</p>
          <div className="pl-5">
            
            <p className="text-[18px] my-1">
              包裹送到天域转运仓库，显示“签收delivered”，仓库会第一时间录入系统。美私地址入库会有相应的延迟。
            </p>
            <p className="text-[18px] my-1">
              仓库签收入库一般2个工作日（节假日除外）内完成。仓库周六日休息。超过三个工作日（节假日除外）未入库请及时联系企业客服。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（2）显示派件，公司没人(business closed)怎么办?</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              周末及美国节假日，美国仓库和快递公司都会放假。下一个工作日快递会继续派件；若超过2个工作日依然未递送成功，可以联系客服进行备注。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（3）包裹没有及时预报怎们办？</p>

          <div className="pl-5">
            <p className="text-[18px] my-1">
              天域转运签收的每个包裹，快递信息都会及时录入系统。可走正常预报流程进行包裹确认或者包裹认领。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（4）知道美国快递单号，如何查询进度呢？</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              登录天域转运账户，首页综合查询输入您的美国快递单号，即可找到对应的PG包裹，查询PG包裹物流就可以奥。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（5）物流查询</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              复制PG开头的包裹编号在天域转运官网查询/或者登录天域转运账户，点击运单-打包包裹列表查看进度也可以奥。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（6）关于时效。</p>
          <div className="pl-5">
            <ul className="text-[16px]">
              <li className="my-1">入库：一般1个工作日内</li>
              <li className="my-1">审核：一般2-4个工作日内</li>
              <li className="my-1">
                转仓：3天内完成转仓（天域转运免税州没有航班，需要将包裹转到纽约才能出库）
              </li>
              <li className="my-1">
                出库：天域转运纽约基本每天都有航班，完成转仓后会安排最近的航班出库
              </li>
              <li className="my-1">
                清关：一般3-10个工作日左右都是正常的，时效内包裹，请您耐心等待奥。
              </li>
            </ul>
          </div>
        </AnswerItem>
      </Answers>
    </>
  );
};
const Qa5 = () => {
  return (
    <>
      <Question text="新增入库即发" />
      <Answers>
        <AnswerItem>
          包裹到达仓库后仓库人员直接开箱进行拍照、防震加固、分箱（如需）等操作后直接出库，减少了上架、分拣、下架等仓库操作，实现当天入库、出库，此渠道不适用于有合箱需求的用户。
        </AnswerItem>
      </Answers>
    </>
  );
};
const Qa6 = () => {
  return (
    <>
      <Question text="售后问题" />
      <Answers>
        <AnswerItem>
          <p>（1）出库后包裹丢了怎么办？</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              出库后包裹遗失一般有2种情况，清关遗失和转国内快递后遗失。{" "}
            </p>

            <ul className="text-[16px]">
              <li className="my-1">
                ①清关遗失:未购买丢失保险，按照运费3倍或者实际购买价值取低赔偿，最高不超过100美金；购买丢失保险，按照实际购买价值理赔，最高不超过500美金。
              </li>
              <li className="my-1">
                ②国内快递遗失：未购买丢失保险，根据国内快递理赔金额赔付，一般最高理赔1000人民币。购买丢失保险，按照实际购买价值，最高不超过500美金，天域转运先行进行理赔。
              </li>
            </ul>
            <p className="text-[18px] my-1">
              关于保险，按照实际购买价值的3%收取，最高投保500美金，汇率7{" "}
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（2）签收后内件缺失，怎么办？</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              天域转运签收的每一个包裹，建议大家都录一下开箱视频，出现问题方便及时处理，并于签收后3天内联系客服提交处理，超期反馈将无法处理。
            </p>

            <p className="text-[18px] my-1">
              注:天域转运有很多客户都是代购，请务必签收第一时间核对内物。若是已经将包裹外箱丢弃/内物部分已经发给客户，将无法处理。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（3）签收后，重量不符怎么办？</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              若感觉包裹重量与系统不符，请于拆包前根据要求录制完整称重视频奥。开箱后重新称重，将不予处理。
            </p>
            <p className="text-[18px] my-1">
              天域转运免责误差是0.3磅，超过免责0.3磅并影响计费，提供完整资料会退回相应运费（手工充值/支付宝），若是不影响计费，会反馈仓库注意，但是不予退款处理奥。
            </p>
            <p className="text-[18px] my-1 text-red-600">
              视频内容请务必连续拍摄到以下步骤和细节：
            </p>

            <ul className="text-[16px]">
              <li className="my-1">
                ①裸称矿泉水、牛奶等标明重量的常见家用产品；
              </li>
              <li className="my-1">
                ②请全方位展示包裹没有破损、开箱痕迹（海关开箱查验请注明）；
              </li>
              <li className="my-1">
                ③请清晰展示天域转运以PG开头的包裹号及收件信息；
              </li>
              <li className="my-1">
                ④称重并清晰展示重量，千克与磅的换算：1千克=2.2046lb…；
              </li>
              <li className="my-1">⑤开箱仔细清点货物数量;</li>
            </ul>
            <p className="text-[18px] my-1">
              拍摄完成，请及时将视频小窗发送给客服mm奥。{" "}
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（4）签收后，包裹内物破损怎么办？</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              天域转运出库的每一个包裹，都有免费给大家购买货损保险。请关注天域转运美国转运微信公众号【我的转运】-【海淘理赔】，根据需求提供相关货损资料。请务必于包裹签收3个工作日内上传相关信息。
            </p>
          </div>
        </AnswerItem>

        <AnswerItem>
          <p>（5）出库/清关超期，如何补偿？</p>
          <div className="pl-5">
            <p className="text-[18px] my-1">
              如果出库/清关超期，可以在30天内联系客服，申请超期补偿。-【海淘理赔】，根据需求提供相关货损资料。请务必于包裹签收3个工作日内上传相关信息。
            </p>
            <p className="text-[18px] my-1">
              补偿政策为：出库后（出库扫描完成，准备送机场开始计算）45天未完成清关的，补偿运费10%；60天未完成清关的，补偿运费50%。
            </p>
            <p className="text-[18px] my-1">该政策自2022年2月3日起执行。</p>

            <ul className="text-[16px]">
              <li className="my-1">
                ①所有补偿均以积分形式返至账户，不支持提现；
              </li>
              <li className="my-1">
                ②补偿范围仅限运费，不包含增值服务、保险、关税等；
              </li>
              <li className="my-1">
                ③请于包裹签收后30天内联系客服申请提交，超期不予受理；
              </li>
              <li className="my-1">④单个包裹补偿最高上限为1000积分。</li>
            </ul>
          </div>
        </AnswerItem>
      </Answers>
    </>
  );
};

export default function page() {
  const types = [
    "如何海淘",
    "海淘常见问题",
    "价格与服务等常见问题",
    "转运过程中常见问题",
    "新增入车即发",
    "售后问题",
  ];
  const [active, setActive] = useState(0);

  return (
    <>
      <section className="bg-module_bg bg-center bg-[length:1920px_650px] h-[650px]  overflow-auto">
        <div className="w-[1200px]  mx-auto">
          <Image
            src={"/assets/help/Help Center.png"}
            className="mt-[262px]"
            alt=""
            width={340}
            height={60}
          ></Image>

          <Image
            src={"/assets/help/Help.png"}
            className="mt-[5px]"
            alt=""
            width={200}
            height={60}
          ></Image>
        </div>
      </section>
      <section className="bg-repect_bg bg-repeat-y bg-top bg-[length:1920px_1640px]">
        <div className="w-[1400px]  mx-auto -translate-y-[50px]">
          <div className="w-[1400px] h-[100px] bg-white rounded-[20px] py-5">
            <ul className="flex justify-center gap-[115px] h-[60px]">
              {types.map((item, index) => {
                return (
                  <li
                    key={index}
                    className={`inline-block leading-[60px] hover:text-[#FFA018] text-[22px] text-center cursor-pointer ${
                      active == index ? "text-[#FFA018]" : ""
                    }`}
                    onClick={() => setActive(index)}
                  >
                    {item}
                  </li>
                );
              })}
            </ul>
          </div>

          <div
            className="w-[1400px] min-h-[1460px] mt-[70px] bg-white rounded-[20px] px-[80px] py-[70px]  flex flex-col
          "
          >
            {active == 0 && <Qa1 />}
            {active == 1 && <Qa2 />}
            {active == 2 && <Qa3 />}
            {active == 3 && <Qa4 />}
            {active == 4 && <Qa5 />}
            {active == 5 && <Qa6 />}
          </div>
        </div>
      </section>
    </>
  );
}
